<template>
  <div class="container">
    <!-- 导航栏 -->
    <div class="nav">
      <div style="margin-left: 30px">
        <ul v-if="userTel == null" class="navul">
          <li @click="gohomepage">
            <van-icon name="wap-home" color="#FF4400" />
            闲呗首页
          </li>
          <li>
            <a class="mylogingo" @click="goLogin">登录</a>&nbsp;/&nbsp;<a
              @click="gozce"
              >注册</a
            >
          </li>
          <li>退出</li>
        </ul>
        <ul v-else class="navul">
          <li  @click="gohomepage"><van-icon name="wap-home" color="#FF4400" />闲呗首页</li>
          <li>欢迎你：{{ this.userTel }}</li>
          <li @click="tuichu">退出</li>
        </ul>
      </div>
      <div style="float: right">
        <ul class="navultow">
          <li @click="gomycenter" class="mycb1">
            <a class="myxb">我的闲呗</a>
            <div class="hen"></div>
            <ul class="second">
              <li><a class="second1">我已买到的宝贝</a></li>
              <li class="second1">我已卖出的宝贝</li>
            </ul>
          </li>
          <li @click="gocustomerchat()">
            联系客服
            <div class="hen"></div>
          </li>
          <li>商家中心</li>
        </ul>
      </div>
    </div>
    
    
    

     <!-- 轮播图 -->
        <div class="fenleilbbox">
            <div class="allfenleibox jiange">
                <h3>分类</h3>
                <ul >
                    <li>
                        <div class="fenxqing"><i class="el-icon-monitor"></i></div>
                        <div @click="gofenlei(1)" class="fenxqing hove1">电器</div> 
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(2)" class="fenxqing hove1">数码</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(6)" class="fenxqing hove1">家装</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(7)" class="fenxqing hove1">玩具</div>
                    </li>
                    <li>
                        <div class="fenxqing"><i class="el-icon-goods"></i></div>
                        <div @click="gofenlei(3)" class="fenxqing hove1">服装</div> 
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(4)" class="fenxqing hove1">奢侈品</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(9)" class="fenxqing hove1">运动户外</div>
                    </li>
                    <li>
                        <div class="fenxqing"><i class="el-icon-tickets"></i></div>
                        <div @click="gofenlei(11)" class="fenxqing hove1">游戏</div> 
                        <div  class="fenxqing">/</div>
                        <div @click="gofenlei(12)" class="fenxqing hove1">图书</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(14)" class="fenxqing hove1">百货</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(10)" class="fenxqing hove1">宠物</div>
                    </li>
                    <li>
                        <div class="fenxqing"><i class="el-icon-office-building"></i></div>
                        <div @click="gofenlei(8)" class="fenxqing hove1">房产</div> 
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(5)" class="fenxqing hove1">车类</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(13)" class="fenxqing hove1">建材</div>

                    </li>
                </ul>
          </div>
          <div class="lunbobox jiange">
            <div class="banner">
                  <el-carousel indicator-position="outside" >
                  <el-carousel-item v-for="(item,index) in bannerArr" :key="index" >
                  <h3 ><img :src="item.commodityImg"></h3>
                  </el-carousel-item>
                </el-carousel>
            </div>
          </div>
          <div class="right1">
            <img src="http://112.74.185.144:8000/files/Zqm1666747516.jpg" >
            <p>闲呗拍卖</p>
          </div>
      </div>
   


    <!-- 拍卖商品筛选 -->
    <div class="selectGoods"></div>
    <!-- 拍卖商品展示 -->
    <div class="goodsBox">
      <div v-for="(item, index) in nowarr" :key="index" @click="jump1(item)">
        <div class="goodsImg">
          <img :src="item.commodityImg" alt="" />
          <div>
            <i class="el-icon-time"></i>
            <!-- 动态结束时间 -->
            <span>距离结束</span> <van-count-down :time="time" />
          </div>
        </div>
        <p class="goodsName">{{ item.commodityName }}</p>
        <div class="goodsPrice">
          <p>
            <span>￥{{item.nowPrice}}</span>
          </p>
          <!-- <p>{{item.bidTimes}}次出价</p> -->
        </div>
      </div>
    </div>
    <!-- 分页按钮 -->
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="total, prev, pager, next, jumper"
        :total="alltotal"
      >
      </el-pagination>
    </div>
    <!-- 服务保障 -->
    <div class="showService">
      <div>
        <img src="../static/imgs/lunbo1.jpg" alt="" />
        <div>
          <p>如实描述承诺</p>
          <p>送拍机构在发拍品时会履行实物描述义务</p>
        </div>
      </div>
      <div>
        <img src="../static/imgs/lunbo2.png" alt="" />
        <div>
          <p>保证金保障</p>
          <p>缴纳足额保证金来确保安全</p>
        </div>
      </div>
      <div>
        <img src="../static/imgs/lunbo2.png" alt="" />
        <div>
          <p>售后服务保障</p>
          <p>在发拍品时会履行实物描述义务</p>
        </div>
      </div>
    </div>
    <!-- 返回顶部 -->
    <el-backtop :bottom="100">
      <div
        style="
           {
            height: 100%;
            width: 100%;
            background-color: #f2f5f6;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
            text-align: center;
            line-height: 40px;
            color: #1989fa;
          }
        "
      >
        UP
      </div>
    </el-backtop>
  </div>
</template> 

<script>
export default {
  data() {
    return {
      userTel:sessionStorage.getItem('userTel'),
      alltotal: 0, //总条数
      pageNum: 1, //当前页
      pagesize: 8, // 分页，每页8个
      nowarr: [], //获取到的商品内容
      activeIndex: "1",
      currentPage: 1, // 默认显示第一页
      time: 30 * 60 * 60 * 1000,  //倒计时
      bannerArr:[{auctionId:1,commodityImg:"http://112.74.185.144:8000/files/fux1666081613.jpg"},{auctionId:2,commodityImg:"http://47.98.224.71:3000/files/GRf1665330443.jpg"},{auctionId:3,commodityImg:"http://112.74.185.144:8000/files/EsS1666082362.jpg"}]

    };
  },
  methods: {
     // 跳转首页
        gohomepage(){
           this.$router.push('/')
           console.log(1)
      },
      
        // 跳转登录
        goLogin(){
            this.$router.push({name:'Login'})
        },

        // 跳转注册
        gozce(){
            this.$router.push({name:'Register'})
        },

        //退出登录的方法
        tuichu(){
            sessionStorage.removeItem('userTel')
            this.$router.go(0)
        },

        //到个人中心
        gomycenter(){
            if(sessionStorage.getItem('userTel')==null){
                this.$router.push({
                    name:'Login'
                })
            }else{
                this.$router.push({
                    name:'MyCenter'
                })
            }
        },
        //去客服聊天
        gocustomerchat(){  
            if (sessionStorage.getItem('userTel')) {
                this.$router.push({name: 'CustomerChat'})
            }
        },

        

    //将商品分页查询出来
    selectpmshopp() {
      this.$axios({
        url: "/api/getallpmshopp/get",
        method: "get",
        params: {
          start: (this.pageNum - 1) * this.pagesize,
          size: this.pagesize,
        },
      })
        .then((resp) => {
          console.log(resp.data,217);
          this.nowarr = resp.data.data;
          console.log(this.nowarr);
          this.alltotal = resp.data.num;
          console.log("总条数", this.alltotal);
        })
        .catch((err) => {
          console.log(err.data);
        });
    },

    // 跳转到对应的信息页面 或 弹框
    handleSelect(key, keyPath) {
      console.log(key, keyPath, 182);
    },
    changeSort(tab, event) {
      console.log(tab, event, "sort");
    },
    changeBrand(tab, event) {
      console.log(tab, event, "brand");
    },
    changeState(tab, event) {
      console.log(tab, event, "state");
    },
    changeAll(tab, event) {
      console.log(tab, event, "all");
    },
    
    // 改变当前页
    handleCurrentChange(currPage) {
      console.log("当前页", currPage);
      this.pageNum = currPage;
      this.selectpmshopp();
    },

    // 拍卖分类
    gofenlei(id){
      console.log(id,297)
       this.$axios({
        url: "/api/getFenlei/get",
        method: "get",
        params: {
          start: (this.pageNum - 1) * this.pagesize,
          size: this.pagesize,
          categoryId:id
        },
      })
        .then((resp) => {
          console.log(resp.data,217);
          this.nowarr=[]
          this.nowarr = resp.data.data;
          this.alltotal = resp.data.num;
          console.log("总条数", this.alltotal);
        })
        .catch((err) => {
          console.log(err.data);
        });

    },


    // 跳转拍卖详情页
    jump1(item){
      localStorage.setItem("paimaiAuctionId",item.auctionId)
      localStorage.setItem("paimaiuserTel",item.userTel)
      this.$router.push("AuctionDetail")
    },


    


    






  },



  mounted() {
    this.selectpmshopp(); //进页面就查询
   
  },



  computed: {
    // 数据总条数，使用ajax获取
    total: function () {
      return this.goodsArr0.length;
    },
    // 当前数据，使用ajax获取
    goodsArr: function () {
      return this.goodsArr0.slice(
        (this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize
      );
    },
  },
};
</script>

<style scoped>
.container {
  width: 1260px;
  padding: 0;
  margin: 0 auto;
}
.header {
  width: 95%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px auto;
}
.header > img {
  width: 18%;
  height: auto;
  margin: 0;
}
.header > div {
  margin: 0;
}
.header > div > input {
  padding-left: 15px;
  min-width: 400px;
  margin-right: -2px;
  outline: none;
  height: 36px;
  line-height: 36px;
  position: relative;
  top: 1px;
  background: rgb(244, 244, 244);
  border-radius: 10px 0 0 10px;
  border: 2px solid rgb(102, 177, 255);
  border-right: none;
}
.header > div > el-button {
  border-radius: 0 10px 10px 0;
}


/* 展示拍卖的商品 */
.goodsBox {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
  /* align-content: space-between; */
}
.goodsBox > div {
  margin-left: 40px;
  width: 20%;
  box-shadow: 2px 2px 10px rgb(72, 73, 74);
  margin-bottom: 25px;
}
.goodsImg {
  position: relative;
  width: 100%;
  height: 289px;
}
.goodsImg > img {
  width: 100%;
  height: 100%;
}
.goodsImg > div {
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}
.goodsImg > div > i,
.goodsImg > div > span {
  margin: 0;
  font-size: 13px;
}
.goodsImg > div > i {
  margin-right: 8px;
}
.goodsName {
  height: 42px;
  line-height: 21px;
  padding: 10px 15px;
  color: rgb(102, 103, 102);
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;
}
.goodsPrice {
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.goodsPrice > p {
  margin: 0;
}
.goodsPrice > p:first-child {
  color: red;
}
.goodsPrice > p:first-child > span:first-child {
  font-size: 15px;
  margin-right: 10px;
}
.goodsPrice > p:first-child > span:last-child {
  font-size: 26px;
}

/* 分页按钮 */
.pagination {
  width: 95%;
  margin: 0 auto;
  text-align: center;
}
/* 显示服务保障 */
.showService {
  width: 95%;
  margin: 0 auto;
  display: flex;
  margin-top: 80px;
  margin-bottom: 20px;
}
.showService > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.showService > div > img {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  margin-right: 8px;
}
.showService > div > div > p:first-child {
  font-size: 30px;
  color: rgb(102, 103, 102);
}
.showService > div > div > p:last-child {
  font-size: 13px;
  color: grey;
  margin: 3px 0;
}

.titlebox{
    display: flex;
    margin: 0 auto;
    width: 360px;
}

/* 分类 */
.fenleilbbox{
  display: flex;
}
.allfenleibox{
    background-color: #F7F9FA;
    height: 333px;
    width: 300px;
    border-radius: 6px;
  }
  .allfenleibox li{
      display: flex;
  }
  .fenxqing{
      margin-left: 10px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      margin-top: 16px;
      line-height: 54px;
  }

  .hove1:hover{
      color: gold;
  }

 /* 轮播图 */
.banner{
   margin: 0 auto;
    width: 500px;
    height:400px;
    margin-left: 90px;
    margin-top: 20px;
    border-radius: 10px;
}

.banner img{
    width: 100%;
    height: 350px;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .right1>img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-left: 192px;
    margin-top: 67px;
  }

  .right1>p{
    margin-left: 169px;
    margin-top: 41px;
    font-size: 25px;
    color: red;
  }
</style>